<div>
    <link rel="stylesheet" type="text/css" href="pages/example/custView/custView.css"/> 
	<link rel="stylesheet" type="text/css" href="libs/swiper/swiper-3.4.2.min.css"/> 
	<yu-row :gutter="24">
		<yu-col :span="3">
				<div class="yu-custview-user">
					 <div class="yu-custview-img">
						<img :src="userImageUrl"/>
					</div>
				</div> 
		</yu-col>
		<yu-col :span="3">
				<div class="yu-custview-user">
					<div class="yu-custview-user-info">
						<b>{{custObjInfo.custName}}</b>
					</div>
					<div class="yu-custview-user-icon">
						<ul class="yu-icon-auto">
							<li class="el-icon-message" title="短信发送" style="cursor: pointer"  @click="sendMessage()"></li>
							<li class="iconfont icon-phone" title="拨号" style="cursor: pointer"  @click="calling()"></li>
							<li class="el-icon-time" title="客户网格归属历史" style="cursor: pointer" @click="searchCustBelongHistory()"></li>
						</ul>
					</div>	
				</div> 
		</yu-col>
		<yu-col :span="18">
	
			<ul class="yu-custbase-info">
				<li><div>客户等级 : {{custObjInfo.custLevel}}</div></li>
				<li><div>理财风评 : {{custObjInfo.fincWind}}</div></li>
				<li><div>是否商户 : {{custObjInfo.flag}}</div></li>
				<li><div>营业执照 : {{custObjInfo.isYyzz}}</div></li>
			</ul>
			<ul class="yu-custbase-info">
				<li><div>普惠小微 : {{custObjInfo.isPuhui}}</div></li>
				<li><div>自身风险 : {{custObjInfo.personRisk}}</div></li>
				<li><div>所属网格 : {{custObjInfo.gridName}}</div></li>
				<li><div>主办客户经理 : {{custObjInfo.mgrName}}</div></li>
			</ul>
			<ul class="yu-custbase-info">
				<li><div>贷款客户 : {{custObjInfo.lnBal}}</div></li>
				<li><div>阳光信贷 : {{custObjInfo.isSun}}</div></li>
				<li><div>客户经理一句话印象 : {{custObjInfo.oneWord}}</div></li>
			</ul>
		</yu-col>
	</yu-row>
	  <yu-tabs v-model="activeNameTab" @tab-click="handleClickTab">
	    <yu-tab-pane label="资产信息" name="one">
			<yu-panel title="持有产品">
				<div style="width: auto;">
					<div class="yu-product">资产</div>
						<div class="yu-tags">
						<yu-tag id='ck'>存款</yu-tag>
						<yu-tag id='lc'>理财</yu-tag>
						<yu-tag id='jj'>基金</yu-tag>
						<yu-tag id='bx'>保险</yu-tag>
						<yu-tag id='xt'>信托</yu-tag>
						</div>
				</div>
				<div style="width: auto;">
					<div class="yu-product">负债</div>
						<div class="yu-tags">
						<yu-tag id='djk'>贷记卡</yu-tag>
						<yu-tag id='zfldk'>住房类贷款</yu-tag>
						<yu-tag id='syfdk'>商用房贷款</yu-tag>
						<yu-tag id='xfdk'>消费贷款</yu-tag>
						<yu-tag id='jydk'>经营贷款</yu-tag>
						</div>
				</div>
				<div style="width: auto;">
					<div class="yu-product">签约</div>
						<div class="yu-tags">
						<yu-tag id='sjyh'>手机银行</yu-tag>
						<yu-tag id='sbkjh'>社保卡激活</yu-tag>
						<yu-tag id='ymt'>一码通</yu-tag>
						<yu-tag id='jlygd'>锦鲤阳光贷</yu-tag>
						<yu-tag id='lmk'>六免卡</yu-tag>
						<yu-tag id='snd'>苏农贷</yu-tag>
						<yu-tag id='qqd'>亲情贷</yu-tag>
						<yu-tag id='bld'>白领贷</yu-tag>
						<yu-tag id='ybpz'>医保凭证</yu-tag>
						<yu-tag id='water'>水费</yu-tag>
						<yu-tag id='power'>电费</yu-tag>
						<yu-tag id='coal'>燃气费</yu-tag>
						<yu-tag id='yxds'>有线电视</yu-tag>
						<yu-tag id='dx'>短信</yu-tag>
						<yu-tag id='ysf'>云闪付</yu-tag>
						<yu-tag id='etc'>ETC</yu-tag>
						<yu-tag id='ylzx'>银联在线</yu-tag>
						<yu-tag id='dfgz'>代发工资</yu-tag>
						<yu-tag id='wxyh'>微信银行</yu-tag>
						</div>
				</div>
			</yu-panel>
			<yu-tabs v-model="activeName" @tab-click="handleClick">
				<yu-tab-pane label="存款" name="first" class="yu-tab-pane-activeName">
					<yu-xtable :base-params="custData" :data-url="depDataUrl" request-type="get" row-number style="width: 100%">
					    <yu-xtable-column prop="acctNo" label="存款账号" width="220px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="crdNo" label="卡号" width="150px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="depBal" label="存款余额" width="130px" align="center" show-overflow-tooltip sortable></yu-xtable-column>
					    <yu-xtable-column prop="userName" label="揽存员" width="110px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="kjOrg" label="会计机构" width="120px" align="center" show-overflow-tooltip></yu-xtable-column> 
					    <yu-xtable-column prop="ddl" label="期限" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="intRt" label="利率" width="90px" align="center"  show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="acctnSbj" label="科目号" width="100px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="opnAcctDt" label="开户日期" width="100px" align="center" show-overflow-tooltip sortable></yu-xtable-column>
						<yu-xtable-column prop="exprDt" label="到期日" width="100px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="acctSt" label="账户状态" width="80px" align="center" show-overflow-tooltip></yu-xtable-column>
					</yu-xtable>
				</yu-tab-pane>
				<yu-tab-pane label="贷款" name="second" class="yu-tab-pane-activeName">
					<yu-xtable :base-params="custData" :data-url="loanDataUrl" request-type="get" row-number style="width: 100%">
					    <yu-xtable-column prop="lnAcctNo" label="贷款账号" width="220px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="orgName" label="放款机构" width="90px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="lnAmt" label="放款金额" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="lnBal" label="余额" width="130px" align="center" show-overflow-tooltip sortable></yu-xtable-column>
					    <yu-xtable-column prop="lnDdl" label="期限" width="160px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="lnIntRt" label="利率" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="repyMod" label="还款方式" width="110px" align="center" show-overflow-tooltip data-code = "REPY_MOD"></yu-xtable-column>
					    <yu-xtable-column prop="ctrNo" label="合同编号" width="110px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="gurtMod" label="担保方式" width="90px" align="center" show-overflow-tooltip data-code = "GURT_MOD"></yu-xtable-column>
						<yu-xtable-column prop="exprDt" label="到期日" width="100px" align="center" show-overflow-tooltip></yu-xtable-column>
					</yu-xtable>
				</yu-tab-pane>
				<yu-tab-pane label="理财" name="third" class="yu-tab-pane-activeName">
					<yu-xtable :base-params="custData" :data-url="fincDataUrl" request-type="get" row-number style="width: 100%">
					    <yu-xtable-column prop="acctNo" label="账户" width="220px" align="center" show-overflow-tooltip></yu-xtable-column>	
						<yu-xtable-column prop="byCost" label="买入成本" width="100px" align="center" show-overflow-tooltip sortable></yu-xtable-column>
					    <yu-xtable-column prop="lot" label="份额" width="90px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="prodNetVal" label="产品净值" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="bal" label="理财余额" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="fdDt" label="起息日" width="160px" align="center" show-overflow-tooltip sortable></yu-xtable-column>
					    <yu-xtable-column prop="exprDt" label="到期日" width="180px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="prodDdlDys" label="天数" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="orgName" label="购买机构名称" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="mktrPsnNo" label="揽存员编号" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="userName" label="揽存员" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					</yu-xtable>
				</yu-tab-pane>
				<yu-tab-pane label="基金" name="fourth" class="yu-tab-pane-activeName">
					<yu-xtable :base-params="custData" :data-url="fundDataUrl" request-type="get" row-number style="width: 100%">
					    <yu-xtable-column prop="acctNo" label="账号" width="220px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="lot" label="持有份额" width="160px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="mktVal" label="市值/余额" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="ystdyPft" label="昨日收益" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="orgName" label="会计机构" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="acmIncm" label="累计收入" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="hldPftRt" label="持有收益率" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="byCost" label="购买本金" width="120px" align="center" show-overflow-tooltip sortable></yu-xtable-column>
						<yu-xtable-column prop="inlByDt" label="初始购买日期" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					</yu-xtable>
				</yu-tab-pane>
				<yu-tab-pane label="保险" name="five" class="yu-tab-pane-activeName">
					<yu-xtable :base-params="custData" :data-url="bxDataUrl" request-type="get" row-number style="width: 100%">
					    <yu-xtable-column prop="acctNo" label="账号" width="220px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="prodName" label="产品名称" width="170px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="insurCo" label="保险公司" width="170px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="crdNo" label="购买卡号" width="180px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="orgName" label="营销机构" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="userName" label="营销人员" width="90px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="pyDdl" label="缴费期限" width="160px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="byAmt" label="保费" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="cfrmDt" label="确认日期" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					</yu-xtable>
				</yu-tab-pane>
				<yu-tab-pane label="信托" name="six" class="yu-tab-pane-activeName">
					<yu-xtable :base-params="custData" :data-url="xtDataUrl" request-type="get" row-number style="width: 100%">
					    <yu-xtable-column prop="acctNo" label="账户" width="220px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="prodName" label="产品名称" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="trstCoNm" label="信托公司" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="preRt" label="预期年化收益率" width="160px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="riskLevel" label="产品风险等级" width="180px" align="center" show-overflow-tooltip></yu-xtable-column>
					    <yu-xtable-column prop="byAmt" label="购买金额" width="120px" align="center" show-overflow-tooltip sortable></yu-xtable-column>
					    <yu-xtable-column prop="intDt" label="起息日" width="120px" align="center" show-overflow-tooltip sortable></yu-xtable-column>
						<yu-xtable-column prop="exprDt" label="到期日" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="daysm" label="天数" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="orgName" label="购买机构名称" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
						<yu-xtable-column prop="userName" label="揽存员" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
					</yu-xtable>
				</yu-tab-pane>
			</yu-tabs>
			<yu-panel title="资产负债时点余额" style="height: 400px;">
				<yu-col :span="12">
					<yu-echarts ref="echarts" :option="optionOne" width="500px" height="300px"></yu-echarts>
				</yu-col> 
				<yu-col :span="12">
					<yu-echarts ref="echarts" :option="optionThree" width="500px" height="300px"></yu-echarts>
				</yu-col>
			</yu-panel>
			<yu-panel title="资产变动趋势" style="height: 400px;">
				<yu-col :span="24">
					<yu-echarts ref="echarts" :option="optionFour" width="1000px" height="300px"></yu-echarts>
				</yu-col> 	
			</yu-panel>
		</yu-tab-pane>
	    <yu-tab-pane label="关联关系" name="two">
			<yu-panel title="家庭信息">
				<yu-xtable :data="familyInfo" row-number style="width: 100%" :pageable=true>
				    <yu-xtable-column prop="custNo" label="客户编号" width="170px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="custNm" label="客户名称" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="rltvObjNm" label="关系人姓名" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="rltvTpNm" label="关系类型" width="100px" align="center" show-overflow-tooltip></yu-xtable-column>
				</yu-xtable>
			</yu-panel>
			<yu-panel title="资金流向">
				<yu-xtable :data="amtflowInfo" row-number style="width: 100%">
				    <yu-xtable-column prop="custNo" label="客户编号" width="170px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="custNm" label="客户名称" width="100px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="trnsOpntNm" label="交易对手名称" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
					<!--交易类型： 转入/转出-->
				    <yu-xtable-column prop="trnsTp" label="交易类型" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="trnsNum" label="交易笔数" width="160px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="trnsAmt" label="交易金额" width="180px" align="center" show-overflow-tooltip></yu-xtable-column>
				</yu-xtable>
			</yu-panel>
			<yu-panel title="担保关系">
				<yu-xtable :data="gurtInfo" row-number style="width: 100%">
				    <yu-xtable-column prop="custNo" label="客户编号" width="170px" align="center" show-overflow-tooltip></yu-xtable-column>
					<yu-xtable-column prop="gurtrNm" label="担保人名称" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="custNm" label="被担保人名称" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="rsplTp" label="责任类型" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="bizCtlg" label="业务种类" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="ctrBgnDt" label="开立日期" width="160px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="gurtAmt" label="担保金额" width="180px" align="center" show-overflow-tooltip></yu-xtable-column>
				</yu-xtable>
			</yu-panel>
			<yu-panel title="对外投资"> 
				<yu-xtable :data="investInfo" row-number style="width: 100%">
				    <yu-xtable-column prop="custNo" label="客户号" width="170px" align="center" show-overflow-tooltip></yu-xtable-column>
					<yu-xtable-column prop="custNm" label="客户名称" width="150px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="corpExtIvsNm" label="企业对外投资名称" width="150px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="sbrbFnddAmt" label="认缴出资额" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="fnddMod" label="出资方式" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="hldStkPctg" label="持股比例" width="160px" align="center" show-overflow-tooltip></yu-xtable-column>
				    <yu-xtable-column prop="ivsLvRel" label="投资层级关系" width="180px" align="center" show-overflow-tooltip></yu-xtable-column>
				</yu-xtable>
			</yu-panel>
		</yu-tab-pane>
	    <yu-tab-pane label="时间轴" name="three" style="height: auto;">
			<yu-panel>
				<el-row> 
				  <yu-button type="primary" round size="large" @click="timeaxs('开户')">开户</yu-button>
				  <yu-button type="success" round size="large" @click="timeaxs('签约')">签约</yu-button>
				  <yu-button type="info" round size="large" @click="timeaxs('产品')">产品</yu-button>
				  <yu-button type="warning" round size="large" @click="timeaxs('动账')">动账</yu-button>
				  <yu-button type="danger" round size="large" @click="timeaxs('沟通记录')">沟通记录</yu-button>
				</el-row>
			</yu-panel>
			<div style="height: 40px;"></div>
			<div class="product-section product-features"> 
				<div class="product-wrapper">
					<div class="product-body swiper-container swiper-container-horizontal">
						<ul class="features-slide swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
							<li class="features-item swiper-slide" style="width: 282.5px;" v-for="(account,index) in timelineItems">
								<h3>{{account.evDt}}</h3><i></i>
								<a class="features-info"><p class="features-info-i"></p><p class="features-info-s">{{account.evDsc}}</p></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div style="height: 50px;"></div>
		</yu-tab-pane>
	  </yu-tabs>
		<el-dialog-x title="客户网格归属历史" :visible.sync="dialogCustHistoryVisible" width="1200px" :center="true">
			<yu-xform label-width="180px" ref="targetValueTable" :disabled="true">
				<yu-xtable :data-url="custHisDataUrl" :pageable=true :base-params="custData" row-number  request-type="get" > 
	              <yu-xtable-column prop="custNo" label="客户编号" width="170px" align="center" show-overflow-tooltip></yu-xtable-column>
	              <yu-xtable-column prop="custName" label="客户名称" width="100px" align="center" show-overflow-tooltip></yu-xtable-column>
				  <yu-xtable-column prop="issuedDate" label="发起日期" width="120px" align="center" show-overflow-tooltip></yu-xtable-column>
	              <yu-xtable-column prop="issuedGridName " label="发起网格名称" width="140px" align="center" show-overflow-tooltip></yu-xtable-column>
	              <yu-xtable-column prop="issuedUserName" label="移出网格员姓名" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				  <yu-xtable-column prop="receiveDate" label="接收日期" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				  <yu-xtable-column prop="receiveGridName" label="接收网格名称" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				  <yu-xtable-column prop="receiveUserName" label="接收网格员姓名" width="130px" align="center" show-overflow-tooltip></yu-xtable-column>
				</yu-xtable>
			</yu-xform>
		</el-dialog-x>
		<el-dialog :center="true" title="短信模板" :visible.sync="sendMesVisible">
		    <yu-xform ref="templetForm" label-width="120px" label-suffix=":">
		        <yu-xform-group :column="1">
		            <yu-xform-item maxlength="10" show-word-limit placeholder="短信模版" rules="required" label="短信模板"
		                           ctype="select" name="modelType" data-code="MODEL_TYPE"
		                           @change="getTemInfo($event)"></yu-xform-item>
		            <yu-xform-item show-word-limit placeholder="模板内容" rules="required" label="模板内容" ctype="textarea"
		                           readonly
		                           name="modelInfo"></yu-xform-item>
		            <yu-xform-item label="审核员" ctype="select" name="approverNo" rules="required"
		                           colspan="12" :data-url="messageApproveUrl"
		                           :data-params="messageApproveParam"></yu-xform-item> 
		        </yu-xform-group>
		        <div class="formButtonGroup">
		            <el-button type="primary" v-loading="loading" @click="addSubmit">确定</el-button>
		            <el-button type="primary" @click="addCancel">取消</el-button>
		        </div>
		    </yu-xform>
		</el-dialog>
</div>
